@use '../variables';

$block: '.#{variables.$ns}control-label';

#{$block} {
    display: inline-flex;
    font-family: var(--g-text-body-font-family);
    font-weight: var(--g-text-body-font-weight);
    color: var(--g-color-text-primary);
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    &_disabled {
        cursor: default;
        pointer-events: none;
    }

    &_size_s,
    &_size_m {
        font-size: var(--g-text-body-1-font-size);
        line-height: 15px;
    }

    &_size_l {
        font-size: var(--g-text-body-2-font-size);
        line-height: 18px;
    }

    &_size_xl {
        font-size: var(--g-text-body-2-font-size);
        line-height: 25px;
    }

    &__indicator {
        flex-shrink: 0;
    }

    &__text {
        flex-grow: 1;
        margin-inline-start: var(--g-spacing-2);
        white-space: normal;

        #{$block}_disabled & {
            opacity: 0.6;
        }
    }
}
